<template>
  <div class="bargain">
    <van-row>
      <van-col span="24"><span @click="gotobargainlist">全民砍价 ></span></van-col>
    </van-row>
    <van-card v-show="item.kanjiaPrice<100" v-for="item in bargainlist" :key="item.id" :num="'库存：'+item.numberOrders"
      :price="item.kanjiaPrice" :desc="item.characteristic" :title="item.name" :thumb="item.pic" tag="热销"
      :origin-price="item.numberSells" @click="gotobargain_list_details(item.id)" />
    <div class="special">
      <van-row>
        <van-col span="24"><span @click="gotosubjectlist">精选专题 ></span></van-col>
      </van-row>
      <van-swipe :loop="false" :width="300" :show-indicators="false">
        <van-swipe-item style="margin-right:2vw" v-for="item in swiperImg" :key="item.id"><img :src="item.pic" alt="22"
            @click="gotosubject_list_details(item.id)">
          <p class="title" v-html="item.title"></p>
          <p class="descript" v-html="item.descript"></p>
        </van-swipe-item>
      </van-swipe>

    </div>


    <div class="shop">
      <van-row>
        <van-col span="24"><span @click="gotorecommend">人气推荐 ></span></van-col>
      </van-row>
      <ul class="shoplist">
        <li v-show="index>=8 && index<=11" v-for="(item,index) in shoplist" :key="item.id" @click="gotorecommend_list(item.id)">
          <img :src="item.pic">
          <p style="font-size:12px;margin-top:1vh">{{item.name}}</p>
          <p class="characteristic">{{item.characteristic}}</p>
          <p class="price">{{'￥'+item.maxCoupons}}</p>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        bargainlist: [],
        swiperImg: [],
        shoplist: []
      }
    },
    methods: {
      gotobargainlist() {
        this.$router.push(this.$path.BARGAINLIST)
      },
      gotobargain_list_details(id) {
        this.$router.push({
          path: this.$path.BARGAIN_LIST_DETAILS,
          query: {
            id
          }
        })
      },
      gotosubjectlist() {
        this.$router.push(this.$path.SUBJECTLIST)
      },

      gotosubject_list_details(id) {
        this.$router.push({
          path: this.$path.SUBJECT_LIST_DETAILS,
          query: {
            id
          }
        })
      },

      gotorecommend() {
        this.$router.push(this.$path.RECOMMEND)
      },

      gotorecommend_list(id) {
        this.$router.push({
          path: this.$path.RECOMMEND_LIST,
          query: {
            id
          }
        })
      },


    },

    mounted() {
      this.$API.bargain_list().then((res) => {
        // console.log(res);
        this.bargainlist = res.data.data.goodsMap
        // console.log(this.bargainlist);
      }).catch((err) => {
        console.log(err);
      });

      this.$API.subject_list().then((res) => {
        // console.log(res);

        this.swiperImg = res.data.data
      }).catch((err) => {
        console.log(err);
      });

      this.$API.shop_list().then((res) => {
        // console.log(res);
        this.shoplist = res.data.data

      }).catch((err) => {
        console.log(err);
      });
    },
  }
</script>

<style lang="scss" scoped>
  .bargain {
    height: 170vh;
    // background-color: rgb(245, 170, 170);
  }

  .van-row {
    height: 5vh;
    line-height: 5vh;
    border-bottom: 1px solid #ccc;
    text-align: center;
  }

  .special {
    height: 45vh;

    // background-color: rgb(158, 149, 149);
    .van-swipe {
      height: 90%;

      img {
        width: 100%;
        height: 70%;
      }

      .title {
        margin-top: 2vh;
        font-size: 12px;

      }

      .descript {
        font-size: 12px;
        width: 75%;
        margin-top: 1vh;
        color: #ccc;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
      }
    }

  }

  .shop {
    width: 100vw;
    height: 85vh;
    // background-color: rgb(187, 170, 170);

    .shoplist {
      height: 80vh;
      display: flex;
      flex-flow: wrap;
      justify-content: space-evenly;
      justify-items: center;

      li {
        margin-top: 1vh;
        width: 46vw;
        height: 48%;
        background-color: #fff;

        img {
          width: 100%;
          height: 72%;

        }

        .characteristic {
          font-size: 12px;
          margin-top: 1vh;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #ccc;
        }

        .price {
          color: red;
          font-size: 12px;
          margin-top: 1vh;
        }
      }
    }
  }
</style>